<template>
  
<el-row :gutter="20">
  <el-col :span="16"  class="l1">
  <i class="el-icon-s-fold" @click="fold" ></i>
 <span class="title">人资管理系统</span></el-col>
  <el-col :span="8" class="l2">
 <el-dropdown :hide-on-click="false">
  <span class="el-dropdown-link">
     <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
    <span>{{$store.state.profile.username}}</span>
  </span>
  <el-dropdown-menu slot="dropdown">
    <el-dropdown-item><span @click="home">首页</span></el-dropdown-item>
    <el-dropdown-item  ><span @click="leave">退出登录</span></el-dropdown-item>
    
  </el-dropdown-menu>
</el-dropdown></el-col>
</el-row>

 

</template>

<script>
// import localstorage from '../../../../../ele/vue-element/src/assets/img/vuepro/vue2/vue2/src/localstorage'
export default {
data() {
  return {
    
  }
},
methods: {
  fold(){
   console.log('fold')
   this.$store.commit('updateIsFold')
   
  },
   home(){
   
    this.$router.push('/home')

  },
  leave(){
    console.log('leave')
    this.$store.state.profile = []
    // RZprofile

    localStorage.setItem('RZtoken','')
    localStorage.setItem('RZprofile',[])
    this.$router.push('/login')

  }
},
}
</script>

<style lang="less" scoped>
.el-row{
  height: 100%;
}
.el-col-8{
  height: 60px;
}
.l1{
  text-align: left;
  display: flex;
  align-items: center;
}
.l2{
  text-align: right;
}
.title{
  margin-left: 20px;
}



    i{
        font-size: 28px;
       
        
    }


.el-dropdown-link{
  margin-left: 10px;
  display: flex;
  align-items: center;
  span{
    margin-left: 10px;
  }
}
</style>